<template>
  <div class="login">
      <div class="inp-user">
          <input type="text" placeholder="手机号码" v-model="username">
      </div>
      <div class="inp-pass">
          <input type="password" placeholder="密码" v-model="password">
      </div>
      <div class="btn">
          <button @click="inps">登录</button>
      </div>
  </div>
</template>

<script>
import axios from 'axios';
import {Toast} from 'mint-ui'
export default {
    data:function(){
        return {
            username:'',
            password:''
        }
    },
    methods:{
        inps(){
            axios.post('/list',{username:this.username,password:this.password}).then(res=>{
                if(res.data.code===200){//判断登录成功的状态
                    localStorage.setItem('token',res.data.token);
                    localStorage.setItem('id',res.data.obj.id);
                    this.$router.push('/home');
                }else if(res.data.code===400){
                    Toast('账号或密码错误')
                }
            })
        }
    }
}
</script>

<style lang='scss' scoped>
    .login{
        height: 100%;
        display: flex;
        flex-direction: column;
        .inp-user{
            height: 40px;
            margin: 10px 10px;
            input{
                width: 100%;
                height: 40px;
                line-height: 40px;
                border: none;
                outline: none;
                border-bottom: 1px solid #f5f5f5;
            }
        }
        .inp-pass{
            height: 40px;
            margin: 10px 10px;
            input{
                width: 100%;
                height: 40px;
                line-height: 40px;
                border: none;
                outline: none;
                border-bottom: 1px solid #f5f5f5;
            }
        }
        .btn{
            text-align: center;
            button{
                width: 80%;
                height: 40px;
                text-align: center;
                line-height: 40px;
                background: #777474;
                border: none;
                outline: none;
                border-radius: 25px;
                color: white;
            }
        }
    }
</style>